<template>
    <div class="container">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <div class="item" v-for="it in list">
                    <div class="left">
                        <img :src="it.img" :alt="it.name">
                    </div>
                    <div class="right">
                        <h1>{{ it.name }}</h1>
                        <h2>{{ it.burdens }}</h2>
                        <div class="intro">{{ it.all_click }}浏览 {{ it.favorites }}收藏</div>
                    </div>
                </div>
            </van-list>

        </van-pull-refresh>

    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import useListStore from '@/store'
const listStore = useListStore()
const list = ref([])
// 下拉加载
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

// 分页
const pageSize = ref(Math.ceil(listStore.list.length / 10))
const currentPage = ref(1)
onMounted(() => {
    list.value = listStore.filterList(10)
})
const onLoad = () => {

    // 异步更新数据
    // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    setTimeout(() => {
        ++currentPage.value
        if (refreshing.value) {
            list.value = [];
            currentPage.value = 1
            refreshing.value = false;
        }
        list.value = listStore.filterList(10 * currentPage.value)

        // 加载状态结束
        loading.value = false;

        // 数据全部加载完成
        if (currentPage.value >= pageSize.value) {
            finished.value = true;
        }
    }, 1000);
};
const onRefresh = () => {
    // 清空列表数据
    finished.value = false;

    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    loading.value = true;
    onLoad();
};
</script>

<style lang="scss" scoped>
@import '@/assets/boreder.scss';

.container {
    .item {
        display: flex;
        align-items: center;
        padding: 10px;

        .left {
            width: 130px;
            height: 80px;

            >img {
                display: block;
                width: 100%;
                height: 100%;
            }
        }

        .right {
            flex: 1;
            h1,
            h2 {
                margin: 0;
                padding: 0;
                font-weight: normal;
                padding-left: 15px;
                font-size: 20px;
                margin-bottom: 5px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
            }

            h2,
            >div {
                font-size: 14px;
                color: #999;
            }

            .intro {
                font-size: 12px;
                padding-left: 15px;
            }
        }

        &:not(:last-child) {
            @include scborder(0 0 1px 0, solid, #666, 5px);
        }
    }
}
</style>